import {ref, toRaw, onMounted, computed} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {defineStore} from 'pinia';
import {message} from 'ant-design-vue';
import {routerData as RouterData} from '@/routes/routerConfig';
const config = {
  // 持久化存储
  persist: {
    // 设置key名 默认持久所有的数据
    key: 'menu',
    // 修改存储位置 默认在localStorage中
    // storage: sessionStorage,
    // 只想持久化单个数据
    // paths: ['count', 'xxxx'], // 要持久化的属性
  },
};

export const useMenuStore = defineStore(
  'menu',
  () => {
    const route = useRoute();
    const router = useRouter();
    const collapsed = ref<boolean>(false); // 控制菜单是否 打开 还是 收起
    const openKeys = ref<any[]>([]); // 选中 subMenu 的 key
    const selectedKeys = ref<string[]>([]); // 当前选中菜单的 key
    const routerData = ref<any[]>(RouterData); // 路由数组对象
    const currentRouterPath = ref<any>(''); // 当前路由路径
    const requestRouterData = (data: any[]) => {
      const homeData = {
        alwaysShow: true,
        component: 'Layout',
        hidden: false,
        meta: {icon: 'welcome', link: null, noCache: false, title: '首页'},
        name: 'Welcome',
        path: '/welcome',
        subPath: '/welcome',
        routerPath: '/welcome',
        redirect: 'noRedirect',
      };
      routerData.value = [homeData, ...data];
    };
    const breadcrumbData = ref<any[]>([]); // 面包屑数据
    const tempBreadcrumbData = ref<any[]>([]); // 临时存储的 面包屑数据
    const multiTagsData = ref<any[]>([{title: '首页', path: '/welcome', routerPath: '/welcome'}]); // 选中过的路由tag 数组集合
    const tempMultiTagsData = ref<any[]>([{title: '首页', path: '/welcome', routerPath: '/welcome'}]); // 临时存储的 选中过的路由tag 数组集合

    const finalSelectedKeys = computed({
      get: () => selectedKeys.value,
      set: (value) => {
        if (multiTagsData.value.length >= 3) {
          if (multiTagsData.value.find((item) => item.path === value[0])) {
            breadcrumbData.value = tempBreadcrumbData.value;
            selectedKeys.value = value;
            multiTagsData.value = tempMultiTagsData.value;
            router.push({path: currentRouterPath.value});
            return;
          }
          message.warning('最多打开3个标签');
          return;
        }
        breadcrumbData.value = tempBreadcrumbData.value;
        console.log('value', value);
        selectedKeys.value = value;
        multiTagsData.value = tempMultiTagsData.value;
        router.push({path: currentRouterPath.value});
      },
    });

    // const actionBreadcrumb = () => {

    // };
    const actionSelectedKeys = (value: any) => {
      selectedKeys.value = value;
    };
    const actionOpenKeys = (value: any) => {
      openKeys.value = value;
    };

    const actionMenuStatus = () => {
      collapsed.value = !collapsed.value;
    };

    const actionSubMenuClick = (item: any) => {
      // console.log('actionSubMenuClick', toRaw(item));
    };
    const actionMenuClick = (subItem: any, item: any) => {
      // console.log('multiTagsData.value', toRaw(multiTagsData.value));
      console.log('ddd', routerData.value);
      tempBreadcrumbData.value = [{...subItem.meta}, {...item.meta}];
      currentRouterPath.value = subItem?.path + '/' + item?.path;
      if (!multiTagsData.value.find((value) => value.path === subItem?.path + '/' + item?.path)) {
        if (multiTagsData.value.length > 2) {
          return;
        }
        tempMultiTagsData.value = [
          ...tempMultiTagsData.value,
          {
            ...subItem.meta,
            ...item.meta,
            title: item.meta.title,
            subPath: subItem?.path,
            path: item.path,
            routerPath: subItem?.path + '/' + item?.path,
          },
        ];
      }

      // console.log('subItem', toRaw(subItem));
      // console.log('点击的菜单', toRaw(item));
    };
    const actionIMenuClick = (item: any) => {
      // tempBreadcrumbData.value = [{...item.meta}];
      console.log('item', item);
      currentRouterPath.value = item?.path;
    };

    const openChange = (subMenuData: any) => {
      // console.log('openChange', subMenuData);
      // console.log('routerData', routerData);
      if (subMenuData.length !== 0) {
        if (subMenuData.length > 1) {
          openKeys.value = [subMenuData[1]];
        } else {
          openKeys.value = [subMenuData[0]];
        }
      } else {
        openKeys.value = [];
      }
    };
    onMounted(() => {
      openKeys.value = [route?.matched[0].path];
      if (selectedKeys.value.length <= 0) {
        selectedKeys.value = [route.path];
      }

      // console.log('route', route);
    });
    return {
      collapsed,
      openKeys,
      selectedKeys,
      finalSelectedKeys,
      routerData,
      breadcrumbData,
      multiTagsData,
      requestRouterData,
      actionMenuStatus,
      actionSubMenuClick,
      actionMenuClick,
      actionIMenuClick,
      openChange,
      actionSelectedKeys,
      actionOpenKeys,
    };
  },
  config,
);
